<template>
  <div class="card-change-history">
    <el-collapse v-model="activeNames" class="custom-collapse">
      <el-collapse-item name="1">
        <template slot="title">
          <div class="title search-title">精准查找</div>
        </template>
        <div class="search">
          <div class="first">
            <div class="input">
              <label>商户编号：</label>
              <el-input v-model.trim="params.search.merchant_no" clearable></el-input>
            </div>
            <div class="input">
              <label>法人名称：</label>
              <el-input v-model.trim="params.search.lp_name" clearable></el-input>
            </div>
          </div>
          <div class="first">
            <div class="input">
              <label>展示名：</label>
              <el-input v-model.trim="params.search.merchant_name" clearable></el-input>
            </div>
            <div class="input">
              <label>签约名：</label>
              <el-input v-model.trim="params.search.sign_name" clearable></el-input>
            </div>
          </div>
          <div class="first">
            <div class="input">
              <label>状态查找：</label>
              <el-select
                v-model="params.audit_status"
                placeholder="请选择"
                clearable
                @change="statusChange"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.status"
                  :label="item.label"
                  :value="item.status"
                ></el-option>
              </el-select>
            </div>
            <div class="input" style="max-width:480px">
              <label style="min-width: 22%;">申请时间：</label>
              <el-date-picker
                v-model="time"
                style="width:500px!important"
                type="datetimerange"
                range-separator="到"
                start-placeholder="申请开始时间"
                end-placeholder="申请结束时间"
              ></el-date-picker>
            </div>
          </div>
          <div class="btn">
            <el-button type="primary" @click="search()">查找</el-button>
            <el-button @click="resetParams()">重置</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <!-- <div class="status">
      <div class="title">状态查找</div>
      <el-radio-group class="group" v-model="params.audit_status" @change="statusChange">
        <el-radio-button
          v-for="item in statusList"
          :key="item.status"
          :label="item.status"
        >{{item.label}}</el-radio-button>
      </el-radio-group>
    </div>-->
    <div class="content">
      <el-table :data="cardChangeList" style="width: 100%" border v-loading="loading">
        <el-table-column width="50" label="序号" header-align="center" align="center">
          <template slot-scope="scope">
            <div>{{params.per_limit*(params.page-1)+scope.$index+1}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="变更记录ID"
          min-width="100"
        ></el-table-column>
        <el-table-column
          prop="merchant_id"
          header-align="center"
          align="center"
          label="ID"
          width="125"
        ></el-table-column>
        <el-table-column
          prop="merchant_no"
          header-align="center"
          align="center"
          label="商户编号"
          width="155"
        ></el-table-column>
        <el-table-column
          prop="merchant_name"
          header-align="center"
          align="center"
          label="展示名"
          show-overflow-tooltip
          width="145"
        ></el-table-column>
        <el-table-column
          prop="lp_name"
          header-align="center"
          align="center"
          label="法人名称"
          width="125"
        ></el-table-column>
        <el-table-column
          prop="sign_name"
          header-align="center"
          align="center"
          label="签约名"
          width="125"
        ></el-table-column>
        <el-table-column
          prop="type_name"
          header-align="center"
          align="center"
          label="修改结算卡类型"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="account_type_name"
          header-align="center"
          align="center"
          label="账户类型"
          width="130"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="原卡信息" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="openCard(scope.row,1)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="修改后的信息" width="110">
          <template slot-scope="scope">
            <el-button type="text" @click="openCard(scope.row,2)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          prop="changed_at"
          header-align="center"
          align="center"
          label="修改时间"
          min-width="140"
        ></el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          min-width="120"
          align="center"
          label="操作"
        >
          <template slot-scope="scope">
            <el-button
              v-if="searchInterface('merchant_settle_changes.update')"
              type="text"
              @click="changeData(scope.row)"
            >修改资料</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="footer">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="params.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="params.per_limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 原卡信息 -->
      <el-dialog title="原卡信息" :visible.sync="old_dialog" width="35%">
        <el-form label-position="right" label-width="200px">
          <el-form-item label="银行名称" v-if="cardInfo.before_bank_name">
            <el-input disabled v-model="cardInfo.before_bank_name" />
          </el-form-item>
          <el-form-item label="支行联行号" v-if="cardInfo.before_branch_no">
            <el-input disabled v-model="cardInfo.before_branch_no" />
          </el-form-item>
          <el-form-item label="银行名称" v-if="cardInfo.before_branch_name">
            <el-input disabled v-model="cardInfo.before_branch_name" />
          </el-form-item>
          <el-form-item label="银行卡号" v-if="cardInfo.before_card_no">
            <el-input disabled v-model="cardInfo.before_card_no" />
          </el-form-item>
          <el-form-item label="持有人名称" v-if="cardInfo.before_holder_name">
            <el-input disabled v-model="cardInfo.before_holder_name" />
          </el-form-item>
          <el-form-item label="结算卡类型(1:对私,2:对公)" v-if="cardInfo.before_settle_type">
            <el-input disabled v-model="cardInfo.before_settle_type" />
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 新卡信息 -->
      <el-dialog title="新卡信息" :visible.sync="new_dialog" width="35%">
        <el-form label-position="right" label-width="200px">
          <el-form-item label="银行名称" v-if="cardInfo.bank_name">
            <el-input disabled v-model="cardInfo.bank_name" />
          </el-form-item>
          <el-form-item label="支行联行号" v-if="cardInfo.branch_no">
            <el-input disabled v-model="cardInfo.branch_no" />
          </el-form-item>
          <el-form-item label="银行名称" v-if="cardInfo.branch_name">
            <el-input disabled v-model="cardInfo.branch_name" />
          </el-form-item>
          <el-form-item label="银行卡号" v-if="cardInfo.card_no">
            <el-input disabled v-model="cardInfo.card_no" />
          </el-form-item>
          <el-form-item label="持有人名称" v-if="cardInfo.holder_name">
            <el-input disabled v-model="cardInfo.holder_name" />
          </el-form-item>
          <el-form-item label="结算卡类型(1:对私,2:对公)" v-if="cardInfo.settle_type">
            <el-input disabled v-model="cardInfo.settle_type" />
          </el-form-item>
          <el-form-item label="结算授权书" v-if="cardInfo.auth_for_settlement">
            <img class="img" :src="cardInfo.auth_for_settlement" />
          </el-form-item>
          <el-form-item label="银行卡" v-if="cardInfo.settle_bankcard">
            <img class="img" :src="cardInfo.settle_bankcard" />
          </el-form-item>
          <el-form-item label="结算人身份证正面" v-if="cardInfo.settler_idcard_front">
            <img class="img" :src="cardInfo.settler_idcard_front" />
          </el-form-item>
          <el-form-item label="结算人身份证反面" v-if="cardInfo.settler_idcard_backend">
            <img class="img" :src="cardInfo.settler_idcard_backend" />
          </el-form-item>
          <el-form-item label="持有身份证" v-if="cardInfo.handheld_idcard">
            <img class="img" :src="cardInfo.handheld_idcard" />
          </el-form-item>
          <el-form-item label="持有银行卡" v-if="cardInfo.handheld_bankcard">
            <img class="img" :src="cardInfo.handheld_bankcard" />
          </el-form-item>
          <el-form-item label="开户许可证" v-if="cardInfo.permit_bank_account">
            <img class="img" :src="cardInfo.permit_bank_account" />
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 商户管理-结算卡变更历史

import { date, copy } from '@/utils'
import { settleChangesList } from '@/api/merchant-admin/card-change-history'
export default {
  data() {
    return {
      loading: false,
      old_dialog: false,
      new_dialog: false,
      activeNames: ['1'],
      cardInfo: {},
      cardChangeList: [],
      total: 0,
      time: [],
      params: {
        page: 1,
        per_limit: 10,
        audit_status: '',
        search: {
          sign_name: '',
          merchant_no: '',
          merchant_name: '',
          lp_name: '',
          apply_time_begin: '',
          apply_time_end: ''
        }
      },
      statusList: [
        {
          label: '待审核',
          status: 1
        },
        {
          label: '审核通过',
          status: 2
        },
        {
          label: '审核驳回',
          status: 3
        }
      ]
    }
  },
  beforeMount() {
    this.getData()
  },
  methods: {
    // 查询
    search() {
      this.getData()
    },
    // 状态切换
    statusChange(value) {
      this.cardChangeList = []
      this.getData()
    },
    // 重置查找条件
    resetParams() {
      this.time = []
      this.params = {
        page: 1,
        per_limit: 10,
        audit_status: '',
        search: {
          sign_name: '',
          merchant_no: '',
          merchant_name: '',
          lp_name: '',
          apply_time_begin: '',
          apply_time_end: ''
        }
      }
      this.getData()
    },
    getData() {
      this.loading = true
      let params = copy.deepCopy(this.params)
      if (this.time && this.time.length) {
        const [begin, end] = this.time
        params.search.apply_time_begin = begin.getTime() / 1000
        params.search.apply_time_end = end.getTime() / 1000
      }
      settleChangesList(params)
        .then(res => {
          const {
            data,
            meta: {
              pagination: { total }
            }
          } = res
          data.forEach(i => {
            i.changed_at = date.formatDate(i.changed_at)
            i.created_at = date.formatDate(i.created_at)
          })
          this.cardChangeList = data
          this.total = total
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 切换页码
    currentChange(value) {
      this.params.page = value
      this.getData()
    },
    sizeChange(value) {
      this.params.per_limit = value
      this.getData()
    },
    // 打开卡片
    openCard(value, flag) {
      if (flag === 1) {
        this.old_dialog = true
      } else {
        this.new_dialog = true
      }
      this.cardInfo = { ...value }
    },
    // 修改资料
    changeData({ id }) {
      this.$router.push({
        path: '/menu/merchant-admin/change-data',
        query: { id }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-change-history {
  width: 100%;
  height: 100%;
  .img {
    width: 160px;
    height: 160px;
    border-radius: 5px;
  }
}
</style>